<template>
  <div class="home-container">
    <div class="header">
      <h1>智能医疗服务平台</h1>
      <p>基于人工智能的全流程医疗服务系统</p>
    </div>

    <div class="features-grid">
      <div
        v-for="feature in features"
        :key="feature.id"
        class="feature-card"
        @click="navigateTo(feature)"
      >
        <div class="feature-icon">
          <div class="icon-wrapper">
            <i :class="feature.icon"></i>
          </div>
          <div class="icon-ring"></div>
          <div class="icon-ring icon-ring-2"></div>
        </div>
        <h3>{{ feature.title }}</h3>
        <p>{{ feature.description }}</p>
        <div class="card-overlay">
          <el-button class="card-overlay"  @click="navigateTo(feature)">
            <el-icon class="el-icon-arrow-right" style="margin-top: 300px">点击进入</el-icon>
          </el-button>
        </div>
      </div>
    </div>

    <div class="footer">
      <p>© 2025 智能医疗服务平台 - 提升医疗效率，改善患者体验</p>
    </div>
    <VoiceInput @update:text="handleVoiceText" />
  </div>
</template>

<script setup>
import VoiceInput from '@/components/VoiceInput/VoiceAi.vue'

const features = [
  {
    id: 1,
    title: '智能导诊',
    description: 'AI语音交互导诊，科室推荐，医学知识科普',
    icon: 'el-icon-connection',
    route: 'http://223.109.220.159:9400/onehospital/#/home'
  },
  {
    id: 2,
    title: '预问诊',
    description: 'AI预问诊交互，病历草稿生成，检查报告识别',
    icon: 'el-icon-chat-line-round',
    route: 'http://223.109.220.159:9400/onehospital/#/home'
  },
  {
    id: 3,
    title: '门诊病历',
    description: '音频录入，病历自动生成，实时质控',
    icon: 'el-icon-document',
    route: 'http://223.109.220.159:20080/inpat-emr/outpat-patient-emr-write/38876FDE16ED134FE06011AC04000151/DEMO/file?emrFileId=2E3A21FC55944652A3B4BE7E4CAFE432&showHead=&hasPrintButton='
  },
  {
    id: 4,
    title: '住院病历',
    description: '入院记录，病程记录，出院小结自动生成',
    icon: 'el-icon-office-building',
    route: 'https://kf22.icu/patient-emr-write-ai/80D024E29BF40C9DE0537A5B14AC1620/766560-1/file?emrFileId=E59369EDBF2645EBAFF495C772331B11&hasPrintButton=&adoptButton='
  },
  {
    id: 5,
    title: '手术病历',
    description: '手术记录模板，语音描述，术中质控',
    icon: 'el-icon-scissors',
    route: 'https://kf22.icu/patient-emr-write-ai/80D024E29BF40C9DE0537A5B14AC1620/766560-1/file?emrFileId=E59369EDBF2645EBAFF495C772331B11&renderKey=4&moveY=0'
  },
  {
    id: 6,
    title: '质控系统',
    description: '病历质控，问题定位，整改建议',
    icon: 'el-icon-check',
    route: 'https://kf22.icu/patient-emr-write-ai/80D024E29BF40C9DE0537A5B14AC1620/766560-1/file?emrFileId=E59369EDBF2645EBAFF495C772331B11&hasPrintButton=&adoptButton='
  }
];

const navigateTo = (feature) => {
  debugger
  console.log(feature)
  window.open(feature.route, '_blank');
};

</script>

<style scoped>
.card-overlay :deep(.el-button) {
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.card-overlay :deep(.el-button:hover) {
  background: transparent;
  border: none;
}

.card-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-container {
  margin-left: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #f5f9ff 0%, #e6f2ff 100%);
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
}

.header h1 {
  font-size: 36px;
  color: #2d5a8c;
  margin-bottom: 10px;
  font-weight: 600;
}

.header p {
  font-size: 18px;
  color: #558bc1;
  font-weight: 300;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 25px;
  max-width: 1400px;
  margin: 0 auto;
}

.feature-card {
  background: white;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(45, 90, 140, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e1edff;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(45, 90, 140, 0.2);
}

.feature-card:hover .card-overlay {
  opacity: 1;
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  background: linear-gradient(135deg, #4da6ff 0%, #2d86ff 100%);
  color: white;
  font-size: 28px;
  box-shadow: 0 4px 10px rgba(45, 134, 255, 0.3);
  animation: icon-pulse 2s infinite;
}

.feature-card:nth-child(2) .icon-wrapper {
  background: linear-gradient(135deg, #5cdbd3 0%, #3cb0a0 100%);
  box-shadow: 0 4px 10px rgba(60, 176, 160, 0.3);
  animation: icon-pulse-green 2s infinite;
}

.feature-card:nth-child(3) .icon-wrapper {
  background: linear-gradient(135deg, #b37feb 0%, #8a4af3 100%);
  box-shadow: 0 4px 10px rgba(138, 74, 243, 0.3);
  animation: icon-pulse-purple 2s infinite;
}

.feature-card:nth-child(4) .icon-wrapper {
  background: linear-gradient(135deg, #ff9c6e 0%, #ff7849 100%);
  box-shadow: 0 4px 10px rgba(255, 120, 73, 0.3);
  animation: icon-pulse-orange 2s infinite;
}

.feature-card:nth-child(5) .icon-wrapper {
  background: linear-gradient(135deg, #ff8c99 0%, #ff6b7f 100%);
  box-shadow: 0 4px 10px rgba(255, 107, 127, 0.3);
  animation: icon-pulse-pink 2s infinite;
}

.feature-card:nth-child(6) .icon-wrapper {
  background: linear-gradient(135deg, #ffd666 0%, #ffa940 100%);
  box-shadow: 0 4px 10px rgba(255, 169, 64, 0.3);
  animation: icon-pulse-yellow 2s infinite;
}

.icon-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #4da6ff;
  opacity: 0.6;
  z-index: 1;
  animation: ring-pulse 2s infinite;
}

.feature-card:nth-child(2) .icon-ring {
  border-color: #5cdbd3;
}

.feature-card:nth-child(3) .icon-ring {
  border-color: #b37feb;
}

.feature-card:nth-child(4) .icon-ring {
  border-color: #ff9c6e;
}

.feature-card:nth-child(5) .icon-ring {
  border-color: #ff8c99;
}

.feature-card:nth-child(6) .icon-ring {
  border-color: #ffd666;
}

.icon-ring-2 {
  animation: ring-pulse 2s infinite 0.5s;
}

.feature-card h3 {
  font-size: 22px;
  color: #2d5a8c;
  margin-bottom: 15px;
}

.feature-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  min-height: 60px;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(45, 90, 140, 0.85);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-overlay span {
  color: white;
  font-size: 18px;
  font-weight: 500;
}

.footer {
  text-align: center;
  margin-top: 50px;
  padding: 20px;
  color: #558bc1;
  font-size: 14px;
}

@keyframes icon-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(45, 134, 255, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(45, 134, 255, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(45, 134, 255, 0.3);
  }
}

@keyframes icon-pulse-green {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(60, 176, 160, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(60, 176, 160, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(60, 176, 160, 0.3);
  }
}

@keyframes icon-pulse-purple {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(138, 74, 243, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(138, 74, 243, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(138, 74, 243, 0.3);
  }
}

@keyframes icon-pulse-orange {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(255, 120, 73, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(255, 120, 73, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(255, 120, 73, 0.3);
  }
}

@keyframes icon-pulse-pink {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(255, 107, 127, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(255, 107, 127, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(255, 107, 127, 0.3);
  }
}

@keyframes icon-pulse-yellow {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(255, 169, 64, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(255, 169, 64, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(255, 169, 64, 0.3);
  }
}

@keyframes ring-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .header h1 {
    font-size: 28px;
  }

  .feature-card {
    padding: 20px;
  }
}
</style>
